<template>
    <div class="customBox">
        <h3 class="title">
            url 管理
            <el-button style="float: right;" type="success" size="mini" round @click="addHeaderKey" circle>
                <i class="el-icon-plus"></i>
            </el-button>
        </h3>
        <el-row class="headerItem" v-for="(item,index) in urlArray" :key="index">
            <el-col :span="18">
                <el-input v-model="item.str" placeholder="url"></el-input>
            </el-col>
            <el-col :span="6">
                <el-button class="DeleteButton" v-if="!item.edit" type="danger" size="mini" icon="el-icon-delete" circle
                    @click="item.edit = true"></el-button>
                <el-button class="DeleteButton" v-if="item.edit" type="danger" size="mini" icon="el-icon-close" circle
                    @click="item.edit = false"></el-button>
                <el-button class="DeleteButton" style="margin-left:0;" v-if="item.edit" type="success" size="mini"
                    icon="el-icon-check" circle @click="deleteHeaderkey(index)"></el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        computed: {
            ...mapState("url", {
                urlArray: state => state.urlArray,
            }),
        },
        methods: {
            addHeaderKey() {
                this.urlArray.push({
                    key: '',
                    edit: false,
                });
            },
            deleteHeaderkey(index) {
                this.$store.dispatch('url/deleteUrl', index);
            }
        },
    }
</script>
<style scoped>
    .DeleteButton {
        margin: 5px 0 0 10px;
        float: right;
    }

    .headerItem {
        margin: 0 0 10px 0;
    }
</style>